<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM创建的各个模块的结构</title>
</head>

<body>
    <!-- 厨师样式 -->
    <!-- 默认厨师1 -->
    <div class="chefBox manIcon">
        <img src="./images/iconfinder_Chef-2_379358.png" alt="">
        <div class="fireChefBtn">+</div>
        <!-- ------- 菜进度条 --------- -->
        <div class="cookingBar shade">酥炸ECharts</div>
        <!-- ------ 做完菜 ------ -->
        <div class="finishedIcon">
            <img src="./images/iconfinder_Food-Dome_379366.png" alt="">
        </div>
    </div>

    <!-- 餐桌顾客样式 -->
    <div class="manIcon customerOntable">
        <img src="./images/379446-512.png" alt="">
        <!-- ------ 菜进度条 ------ -->
        <div class="orderedDishesQueue">
            <div class="dishesBar shade">酥炸ECharts
                <img src="./images/iconfinder_Food-Dome_379366.png" alt="" class="serveIcon">
            </div>
            <div class="dishesBar shade">酥炸ECharts
                <img src="./images/iconfinder_Food-Dome_379366.png" alt="" class="serveIcon">
            </div>
            <div class="dishesBar shade">酥炸ECharts
                <img src="./images/iconfinder_Food-Dome_379366.png" alt="" class="serveIcon">
            </div>
        </div>
        <!-- ------ 生气安抚 ------ -->
        <div class="appeaseIcon">
            <img src='./images/iconfinder_Instagram_UI-07_2315589.png' alt="">
        </div>
        <!-- ------- 支付 ---------- -->
        <div class="payIcon">
            <img src="./images/iconfinder_Euro-Coin_379523.png" alt="">
        </div>
    </div>

    <!-- 排队顾客样式 -->
    <div class="waitCustomerBox manIcon">
        <img src="./images/379446-512.png" alt="">
        <div class="waitingBar shade">等位中</div>
    </div>
</body>

</html>